<script setup lang="ts">
import { ref } from 'vue';
import type { InventorySlotInfoItem } from '../../../game/model/inventory/type';
import { ITEM_TYPE } from '../../../game/data/item/type';
import CultivationSkillDetail from './cultivation-skill-detail.vue';
import EquipmentDetail from './equipment-detail/index.vue';

const open = ref(false);
const title = ref('物品信息');
const currentItem = ref<InventorySlotInfoItem | null>(null);

function show(item: InventorySlotInfoItem) {
  switch (item.type) {
    case ITEM_TYPE.CULTIVATION_SKILL:
      title.value = '功法信息';
      break;
    case ITEM_TYPE.EQUIPMENT:
      title.value = '';
      break;
    default:
      title.value = '物品信息';
      break;
  }
  currentItem.value = item;
  open.value = true;
}

function close() {
  open.value = false;
}

defineExpose({
  show,
  close,
});
</script>

<template>
  <a-modal
    v-model:open="open"
    :wrap-class-name="
      ['backpack-modal', title === '' ? 'hidden-title' : ''].join(' ')
    "
    :centered="true"
    :closable="false"
    :footer="null"
    :destroy-on-close="true"
  >
    <template #title>
      <div class="w-full text-center">{{ title }}</div>
    </template>
    <cultivation-skill-detail
      v-if="currentItem && currentItem.type === ITEM_TYPE.CULTIVATION_SKILL"
      :item="currentItem"
      @close="close"
    ></cultivation-skill-detail>
    <equipment-detail
      v-else-if="currentItem && currentItem.type === ITEM_TYPE.EQUIPMENT"
      :item="currentItem"
      @close="close"
    ></equipment-detail>
  </a-modal>
</template>

<style>
.backpack-modal .ant-modal .ant-modal-content {
  padding: 8px;
}
.hidden-title .ant-modal .ant-modal-header {
  display: none;
}
</style>
